<template>
  <splitpanes class="default-theme">
    <pane size="15" :min-size="0" max-size="50">
      <sign-picture @rowClick="selectRow" />
    </pane>
    <pane size="85" :min-size="0" max-size="100">
      <h3 v-if="tabs.length === 0">未选择签章</h3>
      <el-tabs v-else v-model="activeName" closable type="border-card" @tab-remove="removeTab">
        <el-tab-pane v-for="item in tabs" :key="item.pictureId" :name="item.pictureId" :label="item.pictureName">
          <sign-conf-auth :picture="item"></sign-conf-auth>
        </el-tab-pane>
      </el-tabs>
    </pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import '@/theme/splitpanes.css'
import SignPicture from "@/views/system/sign/SignPicture";
import SignConf from "@/views/system/sign/SignConf";
import SignConfAuth from "@/views/system/sign/SIgnConfAuth";
export default {
  name: "SignManage",
  components: {SignConfAuth, SignConf, SignPicture, Splitpanes, Pane},
  data() {
    return {
      tabs: [],
      activeName: ''
    }
  },
  methods: {
    selectRow(row){
      const index = this.tabs.findIndex(item => item.pictureId === row.pictureId)
      if (index < 0) {
        this.tabs.push(row)
      }
      this.activeName = row.pictureId
    },
    removeTab(key) {
      this.tabs = this.tabs.filter(tab => tab.pictureId !== key)
      if (this.tabs.length > 0) {
        this.activeName = this.tabs[0].pictureId
      }
    }
  }
}
</script>

<style scoped>

</style>
